<template>
  <div class="header_top">
    <v-head />
    <!-- banner -->
    <div class="banner">
      <swiper :options="swiperBanner" ref="mySwiper">
        <swiper-slide v-for="(item, index) in this.bannerList" :key="index"
          ><router-link :to="{ path: item.url }"
            ><img :src="$api + item.image" class="w100" alt="" /></router-link
        ></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 在这里你可以做什么 -->
    <dowhat> </dowhat>
    <!-- 热门活动 -->
    <active> </active>

    <!-- 广告栏 -->
    <div class="index_three">
      <div class="container">
        <div class="row">
          <div
            class="col-md-6 col-sm-6"
            v-for="(item, index) in this.adveList"
            :key="index"
          >
            <router-link :to="{ path: item.url }" class="bl">
              <div class="over">
                <img :src="$api + item.image" alt="" />
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门团队 -->
    <team> </team>
    <!-- 有趣的故事 -->
    <div class="index_five">
      <div class="container">
        <div class="title1 ta">那些有趣的故事</div>
        <div class="subtitle ta">
          在这里，你可以看到团休活动一些花絮，个人经验的分享，他们学习了新技能，结交了终身朋友
        </div>

        <ul class="clearfix story_ul row">
          <li
            class="col-md-6"
            v-for="(item, index) in this.funnyStory"
            :key="index"
          >
            <div class="clearfix">
              <router-link
                :to="{ path: '/stroyshow', query: { id: item.id } }"
                class="fl left bl"
              >
                <div
                  class="img"
                  :style="{
                    backgroundImage: 'url(' + $api + item.image + ')',
                  }"
                ></div>
              </router-link>

              <div class="fr right">
                <div class="clearfix data">
                  <div class="fl">{{ item.create_time | formatDate }}</div>
                  <div class="fr">
                    <i class="iconfont icon-yanjing"></i>{{ item.views }}
                  </div>
                </div>
                <!-- :to="{ path: item.url }"  -->
                <router-link
                  :to="{ path: '/stroyshow', query: { id: item.id } }"
                  class="bl name line2"
                  >{{ item.title }}</router-link
                >
                <div class="text line2" v-html="item.content">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </li>
        </ul>

        <div class="ta">
          <div class="more ma">
            <router-link to="/stroylist">查看更多</router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

  <script>
import vHead from "../websitecom/Head.vue";
import vFoot from "../websitecom/Foot.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { formatDate } from "../assets/data.js";
import Dowhat from "./index/dowhat.vue";
import Team from "./index/team.vue";
import Active from "./index/active.vue";
export default {
  components: {
    vHead,
    vFoot,
    swiper,
    swiperSlide,
    Dowhat,
    Team,
    Active,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      swiperBanner: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperIndex: {
        slidesPerColumnFill: "row",
        slidesPerView: 4,
        spaceBetween: 26,
        slidesPerColumn: 2,
        observer: true,
        observeParents: true,
        breakpoints: {
          990: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          767: {
            slidesPerView: 1,
            spaceBetween: 15,
            slidesPerColumn: 1,
            pagination: {
              el: ".index_two .swiper-pagination",
              clickable: true,
            },
          },
        },
      },

      bannerList: [], //banner
      adveList: [], //广告位
      funnyStory: [],
    };
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },

  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop = 0;
  },
  methods: {
    // banner & ad
    getBanner() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/index/index")
        .then(function (response) {
          that.bannerList = response.data.data.banner;
          that.adveList = response.data.data.ad;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    // 有趣的故事
    getfunnyStory() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/index/hotstory")
        .then(function (response) {
          that.funnyStory = response.data.data;
          // that.adveList = response.data.data.ad;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  created() {
    this.getBanner(); // banner & ad
    this.getfunnyStory(); // 有趣的故事
  },
};
</script>
<style>
.banner .swiper-pagination-bullet {
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.banner .swiper-pagination-bullet-active {
  background-color: #ffce45 !important;
}
.banner .swiper-pagination {
  bottom: 2.5rem;
}
</style>
<style scoped>
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.tx_img img {
  border-radius: 50%;
}
.swiper-pagination-bullet {
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #ffce45 !important;
}
.banner .swiper-pagination {
  bottom: 2.5rem;
}
.el-tabs__header {
  position: absolute;
  top: -3px;
  left: 24%;
  width: auto;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav,
.el-tabs--card > .el-tabs__header {
  border: none;
}
.index_top li a {
  color: #848484;
}
.index_top li,
.el-tabs__item {
  font-size: 1rem;
  line-height: 1.875rem;
  color: #848484;
  margin-left: 2.1875rem;
  padding: 0 0 0.5rem 0 !important;
  height: auto;
  position: relative;
  float: left;
}
.index_top li::before,
.tab-teamone::before,
.el-tabs__item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #de5044;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.index_top li.active a,
.index_top li:hover a {
  color: #de5044;
}
.index_top li.active::before,
.index_top li:hover::before,
.el-tabs__item:hover::before,
.el-tabs__item.is-active::before {
  width: 100%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.index_four .el-tabs__item::before {
  background: #19a15f;
}

.index_four .el-tabs__item.is-active,
.index_four .el-tabs__item:hover {
  color: #19a15f;
}
.index_top {
  position: relative;
}
.index_two .index_top .fl ul {
  width: 70%;
}
/* .index_two .right {
  position: absolute;
  top: .625rem;
  right: 0;
} */

.index_two .left ul {
  margin-top: 0.9375rem;
}

.activity .line2.text {
  height: 3.75rem;
}
</style>

<style lang="less" scoped>
.index_two {
  padding: 3.75rem 0;
}

.index_top {
  margin-bottom: 2.5rem;

  .left {
    .hot {
      width: 3.875rem;
      line-height: 2.0625rem;
      background-color: #de5044;
      border-radius: 4px 0 4px 4px;
      position: relative;
      font-size: 1rem;
      color: #ffffff;
      text-align: center;
    }

    .hot::before {
      content: "";
      position: absolute;
      top: 0;
      right: -0.5rem;
      width: 0;
      height: 0;
      border-top: 0.5rem solid #de5044;
      border-right: 0.5rem solid transparent;
    }

    .hot_text {
      font-size: 1.75rem;
      line-height: 1.75rem;
      margin-left: 0.9375rem;
    }

    ul li {
      float: left;
      font-size: 1rem;
      line-height: 1.875rem;
      color: #848484;
      margin-left: 2.1875rem;
    }

    ul li a {
      position: relative;
      padding-bottom: 0.25rem;
    }

    ul li a::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: #de5044;
      transition: all 0.4s;
      -webkit-transform: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
    }

    ul li.active,
    ul li:hover {
      a {
        color: #000;
      }

      a::before {
        width: 100%;
        transition: all 0.4s;
        -webkit-transform: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
      }
    }
  }

  .right {
    a {
      color: #848484;
    }

    font-size: 1rem;
    line-height: 1.875rem;
    .iconfont {
      font-size: 1rem;
    }
  }

  .right:hover {
    a {
      color: #4c8bf5;
    }
  }
}
.index_three {
  margin-bottom: 3.125rem;
}

.index_two .left ul li {
  margin: 0.25rem 0.625rem !important;
}

.index_four .left .hot,
.list_team .left .hot,
.index_four .left ul li a::before,
.list_team .left ul li a::before {
  background-color: #19a15f;
}

.index_four .left .hot::before,
.list_team .left .hot::before {
  border-top: 0.5rem solid #19a15f;
}

.index_four .activity > div:hover,
.list_team .activity > div:hover {
  border-color: #19a15f;
}

.index_four .activity > div:hover .name,
.list_team .activity > div:hover .name,
.index_four .activity .address i,
.list_team .activity .address i {
  color: #19a15f;
}
.index_four {
  padding: 3.75rem 0;
  background-color: #f7f8fa;
}

.index_five {
  padding: 3.75rem 0;
}
.index_five .more {
  margin-top: 0.9375rem;
  background-color: #ffce45;
  border-color: #ffce45;
}

.index_five .more:hover {
  background: #fff;
}

.index_five .more:hover a {
  color: #ffce45;
}

.index_five .subtitle {
  margin-bottom: 2.5rem;
}
.index_top .left ul li a {
  color: #000 !important;
}
.story_ul li {
  margin-bottom: 1.6875rem;
}

.story_ul li > div {
  border-radius: 0.625rem;
  border: solid 1px #dedede;
  padding: 1.5625rem;
}

.story_ul li .left {
  width: 41%;
}

.story_ul li .left .img {
  height: 11.75rem;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.story_ul li .right {
  width: 59%;
  padding-left: 1.875rem;
}

.story_ul li .right .data {
  font-size: 0.875rem;
  line-height: 1.875rem;
  color: #848484;
}

.story_ul li .right .data .fr i {
  margin-right: 0.5625rem;
  font-size: 0.875rem;
}

.story_ul li .right .name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 2rem;
  color: #000000;
}

.story_ul li:hover > div {
  box-shadow: 0px 0.4375rem 0.9375rem 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  border: solid 1px #ffce45;
}

.story_ul li:hover > div .name {
  color: #ffce45;
}
.banner .swiper-pagination-bullet {
  opacity: 1 !important;
  background: #fff !important;
}

@media (max-width: 990px) {
  .banner .swiper-pagination {
    bottom: 10px;
  }
}
@media (max-width: 767px) {
  .index_three .col-md-6:nth-child(1) {
    margin-bottom: 15px;
  }
  .index_three {
    margin-bottom: 25px;
  }
  .index_five {
    padding: 25px 0;
  }
  .index_five .subtitle {
    margin-bottom: 15px;
  }
  .story_ul li:last-child {
    margin-bottom: 0;
  }
  .index_five .more {
    margin-top: 20px;
  }
  .story_ul li > div {
    border-radius: 5px;
    padding: 12px;
  }
  .story_ul li .left .img {
    height: 9rem;
  }

  .story_ul li .text {
    line-height: 20px;
  }
  .story_ul li {
    margin-bottom: 15px;
  }
}
</style>
